<template>
  <button
    :class="classArr"
    :type="buttonType"
    :disabled="state.disabled"
    @click="handleButtonClick"
  >
    <view :class="ns.b('content')">
      <iBizIcon :class="ns.bm('content', 'icon')" :icon="sysImage" />
      <span :class="ns.bm('content', 'caption')">
        {{ showCaption ? captionText : null }}
      </span>
    </view>
  </button>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { IPanelButton } from '@ibiz/model-core'
import { computed } from 'vue'
import { PanelButtonController } from './i-biz-panel-button.controller'
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelButton>,
    required: true,
  },
  controller: {
    type: PanelButtonController,
    required: true,
  },
})
const ns = useNamespace('panel-button')

const { caption, captionItemName, renderMode, itemStyle, showCaption, sysImage, codeName } =
  props.modelData

const { panel, state } = props.controller
const { id } = props.modelData
const captionText = computed(() => {
  if (captionItemName && panel.data) {
    return panel.data[captionItemName]
  }
  return caption
})

const buttonType = computed(() => {
  if (Object.is(renderMode, 'LINK')) {
    return 'text'
  }
  if (itemStyle) {
    switch (itemStyle) {
      case 'PRIMARY':
        return 'primary'
      case 'SUCCESS':
        return 'success'
      case 'INFO':
        return 'default'
      case 'WARNING':
        return 'warning'
      case 'DANGER':
        return 'danger'
      case 'INVERSE':
        return 'default'
      default:
        return 'default'
    }
  }
  return 'default'
})

const handleButtonClick = (event: MouseEvent) => {
  props.controller.onActionClick(event)
}
// 类名控制
const classArr = computed(() => {
  const result: Array<string | false> = [ns.b(), ns.m(id)]
  if (props.controller) {
    result.push(
      ...props.controller.containerClass,
      ns.is('hidden', !props.controller.state.visible),
    )
  }
  return result
})
</script>
<style lang="scss">
@import './i-biz-panel-button';
</style>
